<template>
  <view class="cart-container">
    <view class="cart-header">
      <text class="title">购物车</text>
    </view>
    
    <view v-if="cartItems.length === 0" class="empty-cart">
      <text>购物车是空的</text>
    </view>
    
    <view v-else class="cart-items">
      <view v-for="item in cartItems" :key="item.cartId" class="cart-item">
        <view class="ticket-info">
          <text class="train-number">{{ item.trainNumber }}</text>
          <text class="route">{{ item.departure }} → {{ item.arrival }}</text>
          <text class="time">{{ item.departureTime }} - {{ item.arrivalTime }}</text>
        </view>
        
        <view class="price-info">
          <text class="price">￥{{ item.price }}</text>
          <button @click="removeFromCart(item)" class="remove-btn">
            删除
          </button>
        </view>
      </view>
      
      <view class="cart-summary">
        <view class="total">
          总计: ￥{{ total }}
        </view>
        <button @click="checkout" class="checkout-btn">
          结算
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
import { useCartStore } from '@/stores/cart'

const cartStore = useCartStore()
const cartItems = computed(() => cartStore.items)
const total = computed(() => cartStore.total)

const removeFromCart = (item) => {
  cartStore.removeFromCart(item.cartId)
  uni.showToast({
    title: '已删除',
    icon: 'success'
  })
}

const checkout = () => {
  if (cartItems.value.length === 0) {
    uni.showToast({
      title: '购物车为空！',
      icon: 'none'
    })
    return
  }
  
  uni.showModal({
    title: '确认订单',
    content: `总金额：￥${total.value}`,
    success: (res) => {
      if (res.confirm) {
        cartStore.clearCart()
        uni.showToast({
          title: '订单提交成功！',
          icon: 'success'
        })
      }
    }
  })
}
</script>

<style scoped>
.cart-container {
  padding: 20rpx;
}

.cart-header {
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.empty-cart {
  text-align: center;
  padding: 100rpx 0;
  color: #666;
}

.cart-item {
  margin: 20rpx 0;
  padding: 20rpx;
  border: 1px solid #ddd;
  border-radius: 8rpx;
}

.ticket-info {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.train-number {
  font-size: 32rpx;
  font-weight: bold;
}

.route {
  color: #333;
}

.time {
  color: #666;
  font-size: 24rpx;
}

.price-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}

.price {
  color: #f60;
  font-size: 36rpx;
  font-weight: bold;
}

.remove-btn {
  background: #ff4444;
  color: white;
  font-size: 24rpx;
  padding: 10rpx 20rpx;
  border-radius: 4rpx;
}

.cart-summary {
  margin-top: 40rpx;
  padding: 20rpx;
  border-top: 1px solid #eee;
}

.total {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.checkout-btn {
  background: #42b983;
  color: white;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 8rpx;
}
</style> 